<template>
  <div id="comment-box" class="article-content">
		<!--发表评论-->
		<div class="">
			<h4 class="column-title">发表评论</h4>
			<div class="me-msg">
				<!--info-->
				<div class="info">
					<ul>
						<li class="form-row">
							<label class="form-label">昵称</label>
							<input type="text" v-model="commentData.nickname" class="input-text" placeholder="请输入您的昵称，昵称不能超过6个"/>
						</li>
						<li>
							<label class="form-label">邮箱</label>
							<input type="text" v-model="commentData.email" class="input-text" placeholder="请输入您的邮箱"/>
						</li>
					</ul>
				</div>
				<!--内容-->
				<div class="msg-content">
					<textarea class="textarea" v-model="commentData.connent" placeholder="请输入内容"></textarea>
					<div class="submit-div cl">
						<i>表情</i>
						<a class="submit-btn" href="javascript:;" @click="setComment">发布</a>
					</div>
				</div>
			</div>
		</div>
		<!--评论列表-->
		<div class="comment-list-box" v-if="comments.length">
			<h4 class="column-title">全部评论({{comments.length}})条</h4>
			<ul class="comment-list">
				<li class="cl" v-for="list in comments">
					<a href="#" class="img">
						<img alt="" src="http://static.h-ui.net/h-ui//images/ucnter/avatar-default.jpg">
					</a>
				    <div class="comment-main">
				    	<div class="comment-header">
			    			<a href="javascript:;" v-text="list.nickname"></a>评论于
				        	<span v-text="list.releaseTime | getdate"></span>
				        </div>
				     	<div class="comment-body">
				       		<p v-text="list.content"></p>
				    	</div>
				    </div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
  export default{
    data(){
      return {
        commentData:{},
        length:0
      }
    },
    props:["id","comments"],
    methods:{
      setComment(){
        var th = this,
            data = th.commentData;
        data.id = th.id;
        this.$http.post("/setComment" , data , function(res){
          if(res.state == "ok"){
            alert("评论成功");
            th.commentData = {};
            th.comments.unshift(res.data);
          }else{
            alert("评论失败");
          };
        },"JSON")
      }
    }
  }
</script>
<style scoped>
	@import url("../../resources/webSite/css/comment.css");
</style>
